<template>
    <div>
        <div class="container">
            <div class="left-container enterpriseInfo-setting">
                <!-- 企业信息部分 -->
                <div class="enterprise-info-section">
                    <pageTitle :title="'企業信息'" />

                    <div class="header-with-edit">
                        <div></div>
                        <el-button type="primary" class="edit-btn" @click="showEditDialog">
                            <el-icon>
                                <Edit />
                            </el-icon>
                            <span>編輯</span>
                        </el-button>
                    </div>

                    <div class="avatar-container">
                        <el-avatar :size="100" :src="enterpriseData.logo || defaultLogo" />
                        <div class="company-name">{{ enterpriseData.name }}</div>
                    </div>
                </div>

                <!-- 企业详细信息 -->
                <div class="enterprise-detail-section">
                    <pageTitle :title="'企業信息'" :text-style="classesSize" />

                    <div class="borderless-table">
                        <div class="table-row">
                            <div class="table-cell label-cell">企業名稱</div>
                            <div class="table-cell">{{ enterpriseData.name }}</div>
                            <div class="table-cell label-cell">企業識別碼</div>
                            <div class="table-cell">{{ enterpriseData.idNumber }}</div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell label-cell">所屬行業</div>
                            <div class="table-cell">{{ enterpriseData.industry }}</div>
                            <div class="table-cell label-cell">企業規模</div>
                            <div class="table-cell">{{ enterpriseData.scale }}</div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell label-cell">聯繫人</div>
                            <div class="table-cell">{{ enterpriseData.contactPerson }}</div>
                            <div class="table-cell label-cell">郵政編碼</div>
                            <div class="table-cell">{{ enterpriseData.postalCode }}</div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell label-cell">所在地區</div>
                            <div class="table-cell">{{ enterpriseData.region }}</div>
                            <div class="table-cell label-cell">詳細地址</div>
                            <div class="table-cell">{{ enterpriseData.address }}</div>
                        </div>
                        <div class="table-row full-width-row">
                            <div class="table-cell label-cell">企業簡介</div>
                            <div class="table-cell full-width-cell">{{ enterpriseData.introduction }}</div>
                        </div>
                    </div>
                </div>

                <!-- 开票信息 -->
                <div class="enterprise-detail-section">
                    <pageTitle :title="'開票信息'" :text-style="classesSize" />

                    <div class="borderless-table">
                        <div class="table-row">
                            <div class="table-cell label-cell">開票抬頭</div>
                            <div class="table-cell">{{ enterpriseData.invoiceTitle }}</div>
                            <div class="table-cell label-cell">納稅人識別號</div>
                            <div class="table-cell">{{ enterpriseData.taxId }}</div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell label-cell">銀行卡號</div>
                            <div class="table-cell">{{ enterpriseData.bankAccount }}</div>
                            <div class="table-cell label-cell">開戶行</div>
                            <div class="table-cell">{{ enterpriseData.bankName }}</div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell label-cell">註冊地址</div>
                            <div class="table-cell">{{ enterpriseData.registeredAddress }}</div>
                            <div class="table-cell label-cell">備註</div>
                            <div class="table-cell">{{ enterpriseData.notes }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right-container enterpriseInfo-setting">
                <pageTitle :title="'操作記錄'" :text-style="classesSize" />

                <div class="timeline-container">
                    <el-timeline>
                        <el-timeline-item v-for="(item, index) in operationLogs" :key="index" :timestamp="item.time"
                            placement="top">
                            <div class="timeline-content">
                                {{ item.content }}
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
        </div>

        <!-- 编辑对话框 -->
        <teleport to="body">
            <transition name="dialog-fade">
                <el-dialog v-model="editDialogVisible" title="編輯企業信息" width="70%" top="5vh"
                    :close-on-click-modal="false" custom-class="edit-info-dialog" v-if="editDialogVisible"
                    @closed="handleDialogClosed">
                    <editInfo ref="editForm" :enterprise-data="enterpriseData" @save="handleSave"
                        @cancel="hideEditDialog" />
                </el-dialog>
            </transition>
        </teleport>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import pageTitle from "@/components/pageTitle/pageTitle.vue"
import editInfo from "./components/editEnterpriseInfo.vue"
import { Edit } from '@element-plus/icons-vue'

const defaultLogo = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'

const classesSize = {
    fontSize: '16px',
    fontWeight: 'bold'
}

const editDialogVisible = ref(false)
const editForm = ref(null)

const enterpriseData = ref({
    logo: '',
    name: '某某科技有限公司',
    idNumber: '123456789',
    type: '1',
    industry: '科技/IT',
    scale: '100-500人',
    contactPerson: '張經理',
    postalCode: '100000',
    region: '台灣省台北市',
    city: '台北市',
    address: '信義區信義路五段7號',
    introduction: '某某科技有限公司成立於2010年，專注於企業軟件開發和IT解決方案提供，擁有豐富的行業經驗和專業的技術團隊，致力於為客戶提供高品質的產品和服務。',
    invoiceTitle: '某某科技有限公司',
    taxId: '123456789',
    bankAccount: '1234567890123456',
    bankName: '台灣銀行信義分行',
    registeredAddress: '台灣省台北市信義區信義路五段7號',
    notes: ''
})

const operationLogs = ref([
    {
        time: '2023-06-15 14:30',
        content: '企業信息更新：修改了聯繫人信息'
    },
    {
        time: '2023-06-10 09:15',
        content: '開票信息更新：變更了銀行賬戶'
    },
    {
        time: '2023-05-28 16:45',
        content: '系統登錄：管理員張三登錄系統'
    },
    {
        time: '2023-05-20 11:20',
        content: '企業信息更新：修改了企業簡介內容'
    },
    {
        time: '2023-05-05 13:10',
        content: '系統設置：更新了企業LOGO'
    }
])

const showEditDialog = () => {
    editDialogVisible.value = true
}

const hideEditDialog = () => {
    editDialogVisible.value = false
}

const handleDialogClosed = () => {
    // 对话框完全关闭后的处理
}

const handleSave = (newData) => {
    enterpriseData.value = { ...enterpriseData.value, ...newData }
    operationLogs.value.unshift({
        time: new Date().toLocaleString(),
        content: '企業信息更新：修改了企業資料'
    })
    hideEditDialog()
}
</script>

<style scoped lang="less">
.container {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    .enterpriseInfo-setting {
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .left-container {
        flex: 1;
        min-width: 0;

        .enterprise-info-section {
            position: relative;

            .header-with-edit {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
            }

            .edit-btn {
                padding: 8px 15px;
            }

            .avatar-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 20px;

                .company-name {
                    margin-top: 15px;
                    font-size: 18px;
                    font-weight: 500;
                    color: #333;
                }
            }
        }

        .enterprise-detail-section {
            margin-top: 30px;

            .borderless-table {
                display: flex;
                flex-direction: column;
                margin-top: 15px;

                .table-row {
                    display: flex;
                    margin-bottom: 12px;

                    &.full-width-row {
                        flex-direction: column;

                        .full-width-cell {
                            margin-top: 8px;
                            line-height: 1.6;
                        }
                    }
                }

                .table-cell {
                    flex: 1;
                    padding: 8px 12px;
                    color: #000;
                    word-break: break-word;

                    &.label-cell {
                        flex: 0 0 100px;
                        color: #666666e0;
                    }
                }
            }
        }
    }

    .right-container {
        width: 35%;
        max-width: 400px;

        .timeline-container {
            margin-top: 20px;
            margin-left: -40px;
            padding-right: 50px;

            :deep(.el-timeline) {
                .el-timeline-item {
                    padding-bottom: 55px;

                    .el-timeline-item__timestamp {
                        color: #666;
                        font-size: 13px;
                        margin-bottom: 5px;
                    }

                    .el-timeline-item__content {
                        color: #333;
                        font-size: 14px;
                    }

                    .el-timeline-item__node {
                        background-color: #bfbfbf;
                        width: 12px;
                        height: 12px;
                    }

                    .el-timeline-item__tail {
                        left: 5px;
                        border-left: 2px solid #bfbfbf;
                    }
                }
            }

            .timeline-content {
                background-color: #f8fafc;
                padding: 8px 12px;
                border-radius: 4px;
                margin-top: 5px;
            }
        }
    }
}

/* 对话框动画效果 */
.dialog-fade-enter-active,
.dialog-fade-leave-active {
    transition: all 0.3s ease;
}

.dialog-fade-enter-from,
.dialog-fade-leave-to {
    opacity: 0;
    transform: translateY(-20px);
}

:deep(.edit-info-dialog) {
    border-radius: 10px;

    .el-dialog__header {
        border-bottom: 1px solid #eee;
        padding: 20px;
        margin-right: 0;
    }

    .el-dialog__body {
        padding: 20px;
        max-height: 70vh;
        overflow-y: auto;
    }

    .el-dialog__footer {
        border-top: 1px solid #eee;
        padding: 15px 20px;
    }
}
</style>